<template>
	<view class="weekly-calendar">
		<view class="calendar-title">
			<view class="left-triangle" @click="preMonth()">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<picker mode="date" :value="format(currentDay, 'yyyy-MM-dd')" @change="bindDateChange">
				<view class="month">{{getCurrentMonth}}</view>
			</picker>
      <view class="right-triangle" @click="nextMonth()">
      	<u-icon name="arrow-right"></u-icon>
      </view>
		</view>
    
		<view class="calendar-content-wrapper">
      <view class="week-section">
        <view class="title">周一</view>
        <view class="title">周二</view>
        <view class="title">周三</view>
        <view class="title">周四</view>
        <view class="title">周五</view>
        <view class="title">周六</view>
        <view class="title">周日</view>
      </view>
			<view class="calendar-events-container">
        <view class="date-section" :class="{'is-today': day.isToday}" v-for="(day, index) in dayList" :key="index">
          <view class="day">{{day.day}}</view>
          <view class="course-list">
            <view v-for="course in day.courseList" :key="course.id" @click="handleSelectCourse(course)">
            	<view class="course-block">{{course.title}}</view>
            </view>
          </view>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
  import { getDay, getDate, isToday, format, addDays, addMonths, subMonths } from 'date-fns'

	export default {
		name: "CalendarWeekly",
    props: {
      courseList: {
        type: Array,
        default: () => [],
      },
    },
		data() {
			return {
				currentDay: new Date(),
				dayList:[],
			}
		},
    computed: {
      getCurrentMonth() {
      	return `${format(this.currentDay, 'yyyy.MM')}`
      },
    },
		created() {
			this.dayList = this.getDayList(new Date());
			this.initCourseList();
		},
		methods: {
      format,
			initCourseList(){
				this.dayList.forEach(day => {
					day.courseList = []
				})
				
				this.dayList[10].courseList = [
					{
						id: 1,
						title: '围棋',
						startTime: 8,
						endTime: 12,
					},
          {
          	id: 2,
          	title: '羽毛球',
          	startTime: 13,
          	endTime: 14,
          }
				]
			},
			// 日历选择日期
			bindDateChange(e) {
				this.currentDay = new Date(e.target.value);
				this.dayList = this.getDayList(e.target.value);
				this.$emit('change-date', this.dayList.filter(d => d.date));
			},
			getDayList(date) {
				const dayList = [];
        
				const d = new Date(date);
        const firstDay = new Date(`${d.getFullYear()}-${d.getMonth()+1}-1`) 
				const day = firstDay.getDay();
        for(let i = 1; i < day; i++) {
          dayList.push({
            date: null
          })
        }
        
        const monthDays = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()
				for (let i = 0; i < monthDays; i++) {
					const date = addDays(firstDay, i)
          
          dayList.push({
            date,
            day: getDate(date),
            isToday: isToday(date)
          }) 
				}
        
				return dayList;
			},
			// 获取上一周
			preMonth(){
				var date = subMonths(this.currentDay, 1);
				this.currentDay = date;
				this.dayList = this.getDayList(date);

        this.$emit('change-date', this.dayList.filter(d => d.date));
			},
			//获取下一周
			nextMonth(){
				const date = addMonths(this.currentDay, 1);
				this.currentDay = date;
				this.dayList = this.getDayList(date);
				
        this.$emit('change-date', this.dayList.filter(d => d.date));
			},
			handleSelectCourse(course) {
				this.$Router.push('/pages/course-schedule/course-detail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weekly-calendar {
		width: 100%;
    padding: 16rpx;
    background: #F8F8F8;
		
		.calendar-title {
			display: flex;
      justify-content: space-between;
      padding: 12rpx 40rpx;
      background: #3EA9FF;
      border-radius: 6px;
      font-size: 40rpx;
      font-weight: 500;
      color: #FFFFFF;

			.month {
        text-align: center;
        font-size: 40rpx;
        font-weight: 500;
        line-height: 56rpx;
			}
		}

		.calendar-content-wrapper {
			position: relative;
			text-align: center;
      
      .week-section {
        margin-top: 16rpx;
        display: flex;
        
        .title {
          margin-left: 2rpx;
          width: 100rpx;
          font-size: 20rpx;
          font-weight: 500;
          color: #74776B;
          line-height: 28rpx;
        }
      }
      
      .calendar-events-container {
      	position: relative;
        display: flex;
        flex-wrap: wrap;
        
        .date-section {
          margin-left: 2rpx;
          width: 100rpx;
          
          &.is-today {
            background: #E3F2FF;
          }
          
          .day {
            margin-top: 16rpx;
            font-size: 34rpx;
            font-weight: 500;
            color: #666666;
          }
          
          .course-list {
            position: relative;
            margin-top: 16rpx;
          }
        }
      	
      	.course-block {
          padding: 10rpx;
          margin-bottom: 4rpx;
          background: #FFFFFF;
          border-radius: 8rpx;
          font-size: 20rpx;
          font-weight: 500;
          color: #666666;
          text-align: center;
          
          &.finished {
            color: #FFFFFF;
            background: #B9CD00;
          }
          
          &.active {
            color: #FFFFFF;
            background: #3EA9FF;
          }
          
          &.absent{
            color: #FFFFFF;
            background: #F8BA00;
          }
      	}
      }
    }
  }
</style>